<script setup lang="ts">
import Vditor from 'vditor'
import 'vditor/dist/index.css';
import {getCategoryAllUrl} from "@/api/blog/category.ts";
import {getArticleByIdUrl, saveArticleUrl, updateArticleUrl} from "@/api/blog/article.ts";

import {MdEditor, config} from 'md-editor-v3';

import 'md-editor-v3/lib/style.css';
import 'highlight.js/styles/atom-one-dark.css';
//@import 'cropperjs/dist/cropper.css';
// import 'katex/dist/katex.min.css';
import {getUploadFileArticleUrl, getUploadFileCoverUrl, uploadFileUrl} from "@/api/file";
import {ElMessage} from "element-plus";

//@import './iconfont.css';
const $route = useRoute()
const vditor = ref(null)
const {proxy}: any = getCurrentInstance()

const formData = ref({
  artId: null,
  artContent: '',
})

const ArticleObject = {
  artId: null,
  isSynchronization: true,
  artContent: '',
}


// 编辑
const handleCancel = () => {
  proxy.$modal.confirm("你确定取消编辑吗? 取消之后不会保存").then(() => {
    // 关闭该页面
    window.close()
  })
}

const editorRef = ref(null)

const handleGetDetails = () => {
  // 获取文章详情
  getArticleByIdUrl({
    artId: formData.value.artId
  }).then(res => {
    Object.keys(formData.value).forEach(key => {
      if (key === 'artCategoryId') {
        // @ts-ignore
        formData.value[key] = Number(res.data[key])
      } else if (key === 'artTag') {
        console.log("res.data[key]", res.data[key])
        // 切割字符串
        console.log("res.data[key]", res.data[key].split(','))
        formData.value[key] = res.data[key] ? res.data[key].split(',') : []
      } else {
        formData.value[key] = res.data[key]
      }
    })
  })
}


onMounted(() => {
  formData.value.artId = $route.params.artId
  if (formData.value.artId) {
    handleGetDetails()
  }
})

const saveArticle = (value: string, html: Promise<string>) => {
  updateArticleUrl(formData.value).then((res: any) => {
    proxy.$modal.msgSuccess(res.msg)
  })
}


const onUploadImg = async (files: File[], callback) => {
  const form = new FormData();
  //@ts-ignore 做一个数组去装
  form.append('files', ...files);
  const res: any = await uploadFileUrl(getUploadFileArticleUrl(formData.value.artId), form)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return
  }
  // 方式二
  callback(
      res.data.map((item: any) => ({
        url: item.url,
        alt: item.name,
        title: item.fileName
      }))
  );
}

</script>

<template>
  <div class="edit-container">
    <MdEditor ref="editorRef"
              @onSave="saveArticle"
              @onUploadImg="onUploadImg"
              class="md-editor" v-model="formData.artContent"/>
    <!--      <div id="vditor"></div>-->
    <!--      <v-md-editor v-model="formData.artContent" :height="'calc(100vh - 50px)'" :style="{width: '100%'}"></v-md-editor>-->
  </div>
</template>


<style scoped lang="scss">

.edit-container {
  width: 100%;
  display: flex;

  .md-editor {
    width: 100%;
    min-height: calc(100vh - $blog-nav-height);
  }

  .art-content {
    flex: 1;

    #vditor {
      height: calc(100vh - $blog-nav-height) !important;
    }
  }

  .art-setting {
    width: 400px;
    padding: 20px;
  }
}

</style>
